<%@ page import="com.github.pagehelper.PageInfo" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>展示用户信息</title>
    <!--导入bootstrap框架-->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/owl.carousel.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.mixitup.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.fancybox.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.counterup.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/waypoints.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.magnific-popup.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/countdown.js"></script>
    <script src="${pageContext.request.contextPath}/js/script.js"></script>

</head>
<style>
    .lt {
        text-align: center;
        margin: 20px;

    }
</style>
<%--页面头部样式--%>
<style>
    .heder_div {
        height: 60px;
        background-color: #0078D7;
    }

    .left_div1 {
        float: left;
        padding-right: 300px;
        margin-top: 20px;
    }

    .left_div2 {
        float: left;
        padding-left: 400px;
        margin-top: 20px;
    }

    .right_div2 {
        float: right;
        margin-top: 20px;
        padding-right: 50px;
    }

    .right_div1 {
        float: right;
        margin-top: 20px;
        padding-right: 10px;
    }

    .fst_class {
        height: 30px;
        margin: auto;
    }
</style>
<%--    弹窗样式--%>
<style>
    .hide{
        display: none;
    }
    .c1{
        position: fixed;
        top:0;
        bottom: 0;
        left:0;
        right: 0;
        background: rgba(0,0,0,.5);
        z-index: 2;
    }
    .c2{
        background-color: white;
        position: fixed;
        width: 400px;
        height: 300px;
        top:50%;
        left: 50%;
        z-index: 3;
        margin-top: -150px;
        margin-left: -200px;
    }
    #modal p {
        margin-left:80px;
    }
</style>

<header>
    <div class="heder_div">
        <div class="left_div1"><img src="${pageContext.request.contextPath}/images/log.png"></div>
        <div class="right_div1" ><input type="button" onclick=Show(); value="新增"></div>
    </div>
</header>

    <script>
    function validate() {
        var pwd1 = document.getElementById("input1").value;
        var pwd2 = document.getElementById("input2").value;

        <!-- 对比两次输入的密码 -->
        if(pwd1 == pwd2) {
            document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
            document.getElementById("submit").disabled = false;
        }
        else {
            document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
            document.getElementById("submit").disabled = true;

        }
    }
</script>

<body>
<div id="shade" class="c1 hide"></div>
<div id="modal" class="c2 hide">
    <form action="/admin/save">
        <p> 添加管理员 </p>
    <p>姓名：<input type="text" name="adminName" onchange="value=value.replace()" /></p>
    <!--姓名发送ajax请求查询是否有重复-->
    <p>用户名：<input type="text" name="adminUsername" onKeyUp="value=value.replace()" /></p>
    <p>密码：<input type="password" id="input1" name="adminPassword" /></p>
        <p>密码：<input type="password" id="input2"><span id="tishi"></span></p>
    <p>
        <input type="submit" value="确定">
        <input type="button" value="取消" onclick="Hide();">
    </p>
    </form>
</div>

<script>
    function Show(){
        document.getElementById('shade').classList.remove('hide');
        document.getElementById('modal').classList.remove('hide');
    }
    function Hide(){
        document.getElementById('shade').classList.add('hide');
        document.getElementById('modal').classList.add('hide');
    }
    function del(aid) {
        location.href="${pageContext.request.contextPath}/admin/del?aid="+aid;
    }
</script>


<div>
    <div class="lt">
        <h3>展示管理员账户数据</h3>
       <%-- <button onclick="find()" type="button" class="btn btn-default navbar-btn" style="float: right">查看历史客户</button>--%>
    </div>

    <div>
        <table class="table table-hover">
            <tr>
                <th class="first_td">管理ID</th>
                <th class="first_td">管理员姓名</th>
                <th class="first_td">管理账号</th>
                <th class="first_td">管理密码</th>
                <th class="first_td">操作</th>

            </tr>
            <c:forEach items="${pageBean.list}" var="admin" varStatus="vs">
                <tr>
                    <td class="first_td">${vs.count}</td>
                    <td class="first_td">${admin.adminName}</td>
                    <td class="first_td">${admin.adminUsername}</td>
                    <td class="first_td">${admin.adminPassword}</td>
                    <td class="first_td"><input type="button" onclick="del(${admin.id})" value="删除"></td>
                </tr>
            </c:forEach>
        </table>
    </div>

</div>
</body>
<%--分页--%>
<nav aria-label="Page navigation">
    <ul class="pagination" id="uls">
        <li>
            <a href=${pageContext.request.contextPath}/admin/findAll?currentPage=${pageBean.currentPage - 1}&rows=5 aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <%-- <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>--%>



        <c:forEach begin="1" end="${pageBean.totalPage}" var="i">
            <c:if test="${pageBean.currentPage==i}" >
                <li  class="active"><a href=${pageContext.request.contextPath}/admin/findAll?currentPage=${i}&rows=5>${i}</a></li>
            </c:if>
            <c:if test="${pageBean.currentPage!=i}" >
                <li><a href=${pageContext.request.contextPath}/admin/findAll?currentPage=${i}&rows=5>${i}</a></li>
            </c:if>
        </c:forEach>
        <li>
            <a href=${pageContext.request.contextPath}/admin/findAll?currentPage=${pageBean.currentPage + 1}&rows=5 aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
        <span><font size="5">共有${pageBean.totalCount}位客户,共${pageBean.totalPage}页</font></span>
    </ul>
</nav>
</html>

